import { StyleSheet, Text, View, FlatList } from 'react-native';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { NavBarHeader, ContentStatus } from '~/components';
import { getDeviceMeasureRecord } from '~/api/deviceApi';
import { onePx, px2dp, scale, width } from '~/utils/px2dp';
import { formatTimestamp } from '~/utils/formatDate';
import { useRoute } from '@react-navigation/native';

export default function CalibrationHitory() {
    const { t } = useTranslation();
    const [listData, setListData] = useState([]);
    const [isRefreshing, setIsRefreshing] = useState(false); // 是否刷新
    const router: any = useRoute();
    const { device_sn } = router.params || {};
    const getData = () => {
        getDeviceMeasureRecord({ device_sn: device_sn }).then((res) => {
            setIsRefreshing(false);
            setListData(res.data);
        });
    };
    const handleRefresh = () => {
        getData();
        setIsRefreshing(true);
    };
    const renderItem = ({ item, index }) => {
        return (
            <View style={[styles.list_item, styles.row]}>
                <Text style={[styles.title, styles.list_width]}>{index + 1}</Text>
                <Text style={[styles.time, styles.list_width]}>{formatTimestamp(item.add_time, 1)}</Text>
                <Text
                    style={[
                        styles.title,
                        styles.list_width,
                        item.diastole > 90 ? styles.large : item.diastole < 60 ? styles.low : '',
                    ]}>
                    {item.diastole}
                </Text>
                <Text
                    style={[
                        styles.title,
                        styles.list_width,
                        item.systolic > 140 ? styles.large : item.systolic < 90 ? styles.low : '',
                    ]}>
                    {item.systolic}
                </Text>
            </View>
        );
    };
    useEffect(() => {
        getData();
    }, []);
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('CalibrationHitory.title')} />
            <View style={[styles.row, styles.header]}>
                <Text style={[styles.title, styles.list_width]}>{t('CalibrationHitory.t1')}</Text>
                <View style={[styles.list_width, { alignItems: 'center' }]}>
                    <Text style={styles.title}>{t('CalibrationHitory.t2')}</Text>
                    <Text style={styles.t1}>{t('CalibrationHitory.t3')}</Text>
                </View>
                <View style={[styles.list_width, { alignItems: 'center' }]}>
                    <Text style={styles.title}>{t('CalibrationHitory.t4')}</Text>
                    <Text style={styles.t1}>（mmHg）</Text>
                </View>
                <View style={[styles.list_width, { alignItems: 'center' }]}>
                    <Text style={styles.title}>{t('CalibrationHitory.t5')}</Text>
                    <Text style={styles.t1}>（mmHg）</Text>
                </View>
            </View>
            <FlatList
                contentContainerStyle={styles.contentContainerStyle}
                showsVerticalScrollIndicator={false}
                data={listData}
                renderItem={renderItem}
                keyExtractor={(item, index) => index.toString()}
                onEndReachedThreshold={0.1}
                onRefresh={handleRefresh}
                refreshing={isRefreshing}
                ListEmptyComponent={() => <ContentStatus status="empty" />}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    title: {
        fontSize: scale(28),
        color: '#000',
        textAlign: 'center',
    },
    list_width: {
        width: (width - px2dp(64)) / 4,
    },
    t1: {
        fontSize: scale(22),
        color: '#a4a4a4',
        marginTop: px2dp(10),
    },
    header: {
        marginHorizontal: px2dp(32),
        marginTop: px2dp(32),
    },
    contentContainerStyle: {
        flexGrow: 1,
        paddingBottom: '20%',
        marginHorizontal: px2dp(32),
    },
    list_item: {
        borderBottomWidth: onePx,
        borderColor: '#eee',
        marginTop: px2dp(32),
        paddingBottom: px2dp(24),
    },
    time: {
        color: '#a4a4a4',
        textAlign: 'center',
    },
    low: {
        color: '#5A8EFF',
    },
    large: {
        color: '#FF4E4E',
    },
});
